<script>
import { editBpmProcessRules, getBpmProcessRules } from '@/api/bpm/rules'
import SelectionTemplate from '@/components/SelectionTemplate/index.vue'
import { getBusinessEnumList } from '@/api/business/business'

export default {
  name: 'AssignRule',
  components: { SelectionTemplate },
  data() {
    return {
      nodeOptions: [],
      defaultProps: {
        children: 'children',
        label: 'nodeName'
      },
      businessEnum: [],
      params: {},
      ruleList: [],
      ruleForm: {
        options: [],
        btnEvents: [],
        defaultBtnEvent: '',
        formCode: '',
        formType: 'interface',
        postIds: [],
        userGroupIds: [],
        comment: '',
        assigneeType: '',
        optionsLeader: '',
        deptLeaders: [],
        departmentLeaders: [],
        isDefaultOwn: 'N', // 是否默认自己
        isModifiable: 'Y', // 是否可修改
        isOptionalRange: 'N', // 是否配置可选择范围
        optionalControls: [], // 可选择控件
        personnelConfigure: 'M', // 人员选择配置
        roleConfigure: 'M', // 角色选择配置
        deptConfigure: 'M', // 部门选择配置
        optionsPersonnel: [], // 可选人员
        optionsRole: [], // 可选角色
        optionsDept: [], // 可选部门
        specialNodes: [] // 配置特殊节点
      },
      btnEvents: [
        {
          'label': '暂存',
          'value': 'save'
        },
        {
          'label': '提交',
          'value': 'submit'
        },
        {
          'label': '委派',
          'value': 'delegate'
        },
        {
          'label': '委派完成',
          'value': 'resolve'
        },
        {
          'label': '审批',
          'value': 'approve'
        },
        {
          'label': '已阅',
          'value': 'read'
        },
        {
          'label': '转办',
          'value': 'assign'
        },
        {
          'label': '退回',
          'value': 'back'
        },
        {
          'label': '撤回',
          'value': 'withdraw'
        },
        {
          'label': '终止',
          'value': 'stop'
        }
      ],
      formQuery: {
        dataListUrl: '/maku-generator/gen_dynamic_form/page'
      }
    }
  },
  created() {
    this.params = this.$route.query
    this.getNodeOptions()
    this.getBusinessEnum()
  },
  methods: {
    handleNodeClick(node) {
      this.ruleForm = node
    },
    getNodeOptions() {
      getBpmProcessRules(this.params).then(res => {
        this.loading = false
        this.ruleList = res.data
        this.getNodeTree()
      }).catch(() => {
        this.loading = false
      })
    },
    getNodeTree() {
      this.nodeOptions = []
      const obj = {
        children: this.ruleList,
        root: 'root',
        nodeName: this.params.modelName
      }
      this.nodeOptions.push(obj)
    },
    btnChange(index, value) {

    },
    backNodeChange() {
      this.$forceUpdate()
      this.ruleForm.backNodeName = []
      this.ruleForm.backNodeCode?.forEach(n => {
        const item = this.ruleList.find(r => r.nodeCode === n)
        this.ruleForm.backNodeName.push(item.nodeName)
      })
    },
    selectBtnEventLabel(val) {
      return this.btnEvents.find(e => e.value === val).label
    },
    getBusinessEnum() {
      getBusinessEnumList().then(resp => {
        const { data } = resp
        this.businessEnum = data
      })
    },
    submit() {
      editBpmProcessRules(this.ruleList).then(() => {
        this.loading = false
        this.$message.success('保存成功')
        this.$router.back()
      })
    }
  }
}
</script>

<template>
  <el-container class="assign-rule">
    <el-aside>
      <el-card :shadow="'hover'" style="height: 100%;overflow: auto">
        <el-tree
          ref="tree"
          :data="nodeOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :highlight-current="true"
          default-expand-all
          @node-click="handleNodeClick"
        />
      </el-card>
    </el-aside>
    <el-main class="assign-rule__main">
      <el-card :shadow="'hover'" style="height: 100%;overflow: auto">
        <el-form :model="ruleForm" label-width="150px" size="small">
          <el-form-item label="任务标识">
            <el-input v-model="ruleForm.nodeCode" :disabled="true" />
          </el-form-item>
          <el-form-item label="任务名称">
            <el-input v-model="ruleForm.nodeName" :disabled="true" />
          </el-form-item>
          <el-form-item label="是否多实例">
            <el-input :value="ruleForm.isMulti ? '是': '否'" :disabled="true" />
          </el-form-item>
          <el-form-item label="表单编码" >
            <selection-template
              v-model="ruleForm.formCode"
              primary-key="code"
              :data-list-url="formQuery.dataListUrl"
            >
              <template #query="{param,reset}">
                <el-form-item>
                  <el-select v-model="param.businessType" @change="reset()">
                    <el-option label="全部" value="" />
                    <el-option v-for="item in businessEnum" :key="item.type" :label="item.desc" :value="item.type" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="param.keyword" style="width: 270px" placeholder="请输入关键词...">
                    <template #append>
                      <el-button @click="query()">查找</el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </template>
              <template>
                <el-table-column prop="name" label="表单名称" />
                <el-table-column prop="code" label="表单编码" />
              </template>
            </selection-template>
          </el-form-item>
          <el-form-item label="处理人规则">
            <el-select v-model="ruleForm.assigneeType" @change="()=> ruleForm.options = null">
              <el-option label="指定" :value="1" />
              <el-option label="候选" :value="2" />
              <el-option label="会签" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item v-show="ruleForm.assigneeType === 1" label="指定处理人">
            <el-select v-model="ruleForm.optionsType">
              <el-option label="流程发起人" :value="1" />
              <el-option label="用户" :value="2" />
              <el-option label="角色" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item v-show="ruleForm.assigneeType === 2" label="候选类型">
            <el-select v-model="ruleForm.optionsType">
              <el-option label="角色" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="ruleForm.btnEvents.findIndex(e => e === 'back') !== -1" label="可退回节点" prop="backNodeCode">
            <el-select v-model="ruleForm.backNodeCode" multiple clearable style="width: 100%" @change="backNodeChange">
              <el-option
                v-for="item in ruleList"
                :key="item.id"
                :label="item.nodeName"
                :value="item.nodeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="启用流程">
            <el-checkbox-group v-model="ruleForm.btnEvents" @change="btnChange">
              <el-checkbox v-for="dict in btnEvents" :key="dict.value" :label="dict.value">
                {{ dict.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-if="ruleForm.btnEvents.length > 0" label="默认流程操作">
            <el-radio-group v-model="ruleForm.defaultBtnEvent" size="small" style="margin-top: 0">
              <el-radio-button
                v-for="(item, index) in ruleForm.btnEvents"
                :key="index"
                :label="item"
              >
                {{ selectBtnEventLabel(item) }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-edit-outline" size="small" @click="submit">保存</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>
<style scoped lang="scss">
.assign-rule {
  position: absolute;
  padding: 10px;
  height: 100%;
  width: 100%;
}

.assign-rule__main {
  padding: 0;
  margin-left: 10px;
}
</style>
